<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="keywords"
      content="网上购物,网上商城,手机,笔记本,电脑,MP3 ,CD , VCD,DV,相机,数码,配件,手表,存储卡,品优购"
    />
    <meta name="description" content="品优购-专业的综合网上购物商城" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物</title>
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="./font/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/header.css" />
    <link rel="stylesheet" type="text/css" href="css/footer.css" />
    <link rel="stylesheet" type="text/css" href="css/category.css" />
    <link rel="stylesheet" type="text/css" href="css/add-cart.css" />
  </head>
  <body>
    <script src="js/header.js" type="text/javascript" charset="utf-8"></script>
    <main>
      <div class="contain center">
        <div class="thisNav">
          <span>首页</span>
          <i class="iconfont icon-xiangyoujiantou"></i>
          <span>平板</span>
          <i class="iconfont icon-xiangyoujiantou"></i>
          <span>华为MatePad 系列</span>
          <i class="iconfont icon-xiangyoujiantou"></i>
          <span>HUAWEI MatePad 5G 10.4英寸</span>
        </div>

        <ul class="add center">
          <li>
            <div class="left-top">
              <img src="img/addcart/3.png" />
            </div>
            <div class="left-low">
              <ul>
                <i class="iconfont icon-xiangzuojiantou"></i>
                <li><img src="img/addcart/1.png" /></li>
                <li><img src="img/addcart/2.png" /></li>
                <li><img src="img/addcart/3.png" /></li>
                <li><img src="img/addcart/4.png" /></li>
                <li><img src="img/addcart/5.png" /></li>
                <i class="iconfont icon-xiangyoujiantou"></i>
              </ul>
            </div>
          </li>
          <li>
            <ul class="rcon">
              <h3 style="color: #666; font-size: 16px">
                HUAWEI MatePad 5G 10.4英寸
              </h3>
              <li class="one">
                <p>价格</p>
                <span style="font-size: 24px; color: #e12228">¥3199.00</span>
              </li>
              <li class="two">
                <p>颜色</p>
                <a href="" class="current">贝母白</a>
                <a href="">夜阑灰</a>
              </li>
              <li class="three">
                <p>版本</p>
                <a href="" class="current">5G全网通 6GB+128GB</a>
                <a href="">WIFI 6GB+128GB</a>
                <a href="">WIFI 4GB+64GB</a>
                <a href="">WIFI 4GB+128GB</a>
              </li>
              <li class="four">
                <div class="choose_amount">
                  <input id="number" type="text" value="1" />
                  <a href="#" class="addition">+</a>
                  <a href="#" class="reduce">-</a>
                </div>
                <a href="detail.html" class="addcar">加入购物车</a>
              </li>
            </ul>
          </li>
        </ul>

        <ul class="tablist center">
          <li>商品介绍</li>
          <li>商品属性</li>
        </ul>

        <div class="display-img center">
          <img src="img/addcart/b1.jpg" />
          <img src="img/addcart/b2.jpg" />
          <img src="img/addcart/b3.jpg" />
          <img src="img/addcart/b4.jpg" />
          <img src="img/addcart/b5.jpg" />
          <img src="img/addcart/b6.jpg" />
          <img src="img/addcart/b7.jpg" />
        </div>
      </div>
    </main>
    <script src="js/footer.js" type="text/javascript" charset="utf-8"></script>
  </body>
  <!-- js文件或代码尽量放在body后面 -->
  <script src="./js/jquery.js" type="text/javascript"></script>
</html>
